<html>
<head>

    <link rel="stylesheet" href="__PLUGIN__/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script></head>
<body>



    <div class="layui-upload-list">
        <span type="button"  class="test1" ><img width="80" height="80" src="/aaa.jpg" class="layui-upload-img" ></span>

    </div>

    <div class="layui-upload-list">
        <span type="button"  class="test1" ><img width="80" height="80" src="/aaa.jpg" class="layui-upload-img" ></span>

    </div>






<script src="__PLUGIN__/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    upload('.test1')

        function upload(elem) {
            layui.use(['upload', 'element', 'layer'], function() {
                var $ = layui.jquery
                    , upload = layui.upload
                    , element = layui.element
                    , layer = layui.layer;

                console.log(upload);
                console.log(element);
                console.log(layer);
                var uploadInst = upload.render({
                    elem: elem
                    , url: "{:url('api/Base/upload')}" //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                    , before: function (obj) {
                        //预读本地文件示例，不支持ie8
                        console.log(obj);
                        obj.preview(function (index, file, base64) {
                            console.log(index);
                            console.log(file);
                            console.log(base64);
                            $('#demo1').attr('src', base64); //图片链接（base64）
                        });

                        element.progress('demo', '0%'); //进度条复位
                        layer.msg('上传中', {icon: 16, time: 0});
                    }
                    , done: function (res) {
                        //如果上传失败

                        console.log(res);
                        //上传成功的一些操作
                        //……
                        $(elem).find('img').attr('src',res.img); //置空上传失败的状态
                    },progress: function(n, elem, e){
                        element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                        if(n == 100){
                            layer.msg('上传完毕', {icon: 1});
                        }
                    }


                });

            })
        }
</script>

</body>
</html>